<!DOCTYPE html>
{assign name="pn" value="index" }
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <title>学海网校-课程列表</title>
    <meta name="baidu-site-verification" content="code-xEvBW4PmsD" />
    <meta name="keywords" content="{:keywords}" />
    <meta name="description" content="学海网校系统,专业的教学分享平台，助你学有所成" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <script src="{:jquery}"></script>
    <link href="{:bootstrap_min_css}" rel="stylesheet">
    <script src="{:bootstrap_min_js}"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.css" rel="stylesheet">

    <link rel="stylesheet" href="/min/?g=css&v={:version}-{$r}">
    <script src="/min/?g=js&v={:version}-{$r}"></script>
    <style>
        body{
            background-color: #f4f4f4;
        }
        .card-wrapper {
            background-color: #FFFFFF;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 30px;
        }
        .category-list{
            margin-bottom: 0;
        }
        .category-list li{
            padding: 8px 12px;
        }
        .category-list li a{
            color: #8c8989;
        }
        .category-list li a:hover,.category-list li.active a{
            color: #42c160;
        }
        .container a{
            text-decoration: none;
        }

        .filter-box{
            height: 40px;
            background-color: #FFFFFF;
            margin-bottom: 30px;
        }
        .filter-box .xbtn{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            vertical-align: middle;
            padding: 0 15px;
            color: #5f5f5f;
            cursor: pointer;
        }
        .filter-box .xbtn:hover{
            color: #42c160;
        }
        .filter-box .xbtn.active{
            background-color: #42c160;
            color: #ffffff;
        }

        .pagination>li>a{
            margin: 0 5px!important;
        }



    </style>
</head>
<body>

{include file="inc/header" /}

<div class="container">
    <h3>课程列表</h3>
    <div class="card-wrapper">
        <div class="card-header">

        </div>
        <div class="card-body">
            <ul class="list-inline category-list">
                {notempty name="$category"}
                    {assign name="cid" value="$category.id" }
                {else}
                    {assign name="cid" value="0" }
                {/notempty}
                <li class="{$cid==0?'active':''}"><a href="/course/explore" class="ease">全部</a></li>
            {volist name="categoryList" id="co"}
                <li class="{$cid==$co.id?'active':''}"><a href="/course/explore/{$co.code}" class="ease">{$co.name}</a></li>
            {/volist}
            </ul>
        </div>
    </div>

    <div class="filter-box">
        <a href="?sort=latest&page={$paging.curr}"><div class="xbtn {$sort=='latest'?'active':''}">最新</div></a>
        <a href="?sort=hot&page={$paging.curr}"><div class="xbtn {$sort=='hot'?'active':''}">最热</div></a>
        <a href="?sort=nb&page={$paging.curr}"><div class="xbtn {$sort=='nb'?'active':''}">推荐</div></a>
    </div>

    <div class="row course-list">
        {volist name='courseList' id='course'}
        <div class="col-lg-3 col-md-4 col-sm-6 course-wrapper">
            <div class="course-item">
                <div class="course-img picbox">
                    <a href="/course/{$course.id}" >
                        <img src="{$course.img}" alt="" class="img-responsive">
                    </a>
                </div>
                <div class="course-info">
                    <div class="title" title="{$course.name}">
                        <a class="link-dark" href="/course/{$course.id}" >
                            {$course.name}
                        </a>
                    </div>
                    <!--<div class="desc" title="course.desc">{{ course.name }}</div>-->
                    <div class="metas clearfix">
                        <span class="num" title="学生人数">
                            <span class="icon glyphicon glyphicon-book"></span> {$course.students_amount|default='0'}
                        </span>
                        <span class="fire" title="评论数量">
                            <span class="icon glyphicon glyphicon-comment"></span> {$course.comments_amount|default='0'}
                        </span>

                        {if $course.price eq 0 }
                        <span class="price free" title="价格">免费</span>
                        {else}
                        <span class="price" title="价格">{$course.price|default='0'}元</span>
                        {/if}

                        </span>
                    </div>
                </div>
            </div>
        </div>
        {/volist}
    </div>

    <nav aria-label="Page navigation" style="text-align: center;">
        <ul class="pagination">
            <li>
                <a href="?sort={$paging.sort}&page={$paging.prev}" aria-label="Previous">上页</a>
            </li>
            {for start="1" end="$paging.pages+1" name="i"}
            <li><a href="?sort={$paging.sort}&page={$i}">{$i}</a></li>
            {/for}
            <li>
                <a href="?sort={$paging.sort}&page={$paging.next}" aria-label="Next">下页</a>
            </li>
        </ul>
    </nav>
</div>


{include file="inc/footer" /}

<script>

</script>
</script>
</body>
</html>
